<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>平台-Processing</title>
	<link rel="shortcut icon" href="./ego.ico" type="image/x-icon">
	<style>
		* {
			padding: 0;
			margin: 0;
		}

		header {
			height: 65px;
			background-color: #fff;
		}

		header .logo {
			margin-left: 40px;
			display: flex;
			align-items: center;
			width: 146px;
			height: 100%;
			line-height: 65px;
		}

		header .logo img {
			height: 30px;
		}

		.main {
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-top: 56px;
			background-color: #fff;

		}

		.main .title {
			font-family: PingFang SC;
			font-style: normal;
			font-weight: 500;
			font-size: 28px;
			line-height: 100%;
			color: #1F2329;
			text-align: center;
			margin-bottom: 23px;
		}

		.main .warp {
			width: 260px;
			margin-bottom: 11px;
		}

		.main .text {
			display: inline-block;
			font-family: PingFang SC;
			font-style: normal;
			font-weight: normal;
			font-size: 14px;
			line-height: 100%;
			color: #646A73;
		}

		.main .text:nth-child(2),
		.text:nth-child(3) {
			display: none;
		}

		.main span {
			display: inline-block;
			margin-bottom: -5px;
			overflow: hidden;
			width: 0;
			animation: appear 1.5s steps(4) infinite;
		}

		.img {
			height: 530px;
			width: 100%;
			position: relative;
		}

		.img .left-right {
			display: flex;
			justify-content: space-between;
			position: absolute;
			left: 50%;
			margin-left: -450px;
			width: 900px;
			height: 100%;
		}

		.img .left-right div {
			width: 445px;
			height: 100%;
			animation: bgcFloating .2s ease-out forwards;
		}

		.img .left-right .left {
			transform: translateX(-100px);
			opacity: 0.2;
			background: url('./images/left_d.png');
			background-size: cover;
		}

		.img .left-right .right {
			transform: translateX(100px);
			opacity: 0.2;
			background: url('./images/right_d.png');
			background-size: cover;
		}

		.img .home {
			position: absolute;
			height: 0;
			width: 400px;
			background: url('./images/welocom.gif') no-repeat;
			background-position: center 22px;
			left: 50%;
			bottom: 180px;
			margin-left: -200px;
			z-index: 1;
			opacity: 0;
			transform: translateY(10px);
			border-radius: 50%;
			animation: homeFloating .5s ease-out forwards;
		}

		.img .under {
			display: flex;
			flex-direction: column;
			align-items: center;
			height: 136px;
			width: 456px;
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			bottom: 135px;
		}

		.img .under img {
			position: absolute;
			height: 110px;
			opacity: 0;
			animation: floating .2s ease-out forwards;
		}

		.img .under :nth-child(3) {
			width: 369px;
			animation-delay: .2s;
		}

		.img .under :nth-child(2) {
			width: 420px;
			margin-top: 13px;
			animation-delay: .1s;
		}

		.img .under :nth-child(1) {
			height: 118px;
			width: 456px;
			margin-top: 26px;
		}

		@keyframes floating {
			0% {
				opacity: 0;
				transform: translateY(50px);
			}

			60% {
				opacity: 0;
			}

			100% {
				opacity: 1;
				transform: translateY(0);
			}
		}

		@keyframes homeFloating {
			0% {
				height: 0;
				opacity: 0;
				transform: translateY(10px);
			}

			50% {
				opacity: 0.5;
			}

			100% {
				height: 289px;
				opacity: 1;
				transform: translateY(0);
			}
		}

		@keyframes appear {
			to {
				width: 14px;
			}
		}

		@keyframes bgcFloating {
			0% {
				opacity: 0.2;
			}

			60% {
				opacity: 0.4;
			}

			100% {
				opacity: 1;
				transform: translateX(0);
			}
		}
	</style>
</head>

<body>
	<header>
		<div class="logo">
			<img src="./images/logo.svg" />
		</div>
	</header>
	<div class="main">
		<h2 class="title">欢迎您进入平台</h2>
		<div class="warp">
			<p class="text" id="text-1">正在为您初始化资源包，请您耐心等待</p>
			<p class="text" id="text-2">正在为您初始化数据，请您耐心等待</p>
			<p class="text" id="text-3">正在为您精心准备主页，请您耐心等待</p>
			<span>....</span>
		</div>
		<div class="img">
			<div class="left-right">
				<div class="left"></div>
				<div class="right"></div>
			</div>
			<div class="home"></div>
			<div class="under">
				<img src="./images/img_under.png" />
				<img src="./images/img_center.png" />
				<img src="./images/img_on.png" />
			</div>
		</div>
	</div>
	<script>
		const first = document.getElementById('text-1')
		const second = document.getElementById('text-2')
		const third = document.getElementById('text-3')
		let BASE_URL = location.origin + '<%= VUE_APP_BASE_PATH %>'
		let search = location.search
		let step = 1
		let seconds = 0
		let timer = setInterval(() => {
			first.style.display = 'none'
			second.style.display = 'none'
			third.style.display = 'none'
			step++
			if (step === 2) {
				second.style.display = 'inline-block'
				fetch(
					`${BASE_URL}/ego_base_info/v1/public/sso/dingtalk/checkTenantStatus${search}`, {
						method: 'GET',
						headers: {
							'Content-Type': 'application/json;charset=UTF-8'
						}
					}).then(response => {
					if ((response.status + '').charAt(0) != 2) {
						link(timer)
					} else {
						return response.json()
					}
				}).then(({
					code,
					data
				}) => {
					if (data.status === 'Failed' || data.status === null) {
						step--
						seconds += 2
						if (seconds === 178) step = 3
					}
				}).catch((err) => {
					console.error(err);
					// link(timer)
				})
			} else if (step === 3) {
				third.style.display = 'inline-block'
			} else if (step === 4) {
				third.style.display = 'inline-block'
				link(timer)
			}
		}, 2000)

		function link(interval) {
			clearInterval(interval)
			location.href = `${location.protocol}//${location.host}`
		}
	</script>
</body>

</html>